<template>
    <div class="pay-signature">
        <div class="pay-signature-main">
            <div class="main-title">签署支付电子协议</div>
            <div class="sub-title">为保证商家、用户和支付机构的权益，需要商家完成支付电子协议签署</div>
            <template v-for="item in info" :key="item.isp_code">
                <div class="code-title">{{ item.isp_code_name }}协议</div>
                <div class="code-sub-title">请法人/联系人打开下方链接完成协议签署</div>
                <div class="code-sub-link">
                    <div class="code-sub-link-box">
                        <el-link :href="item.signing_link" target="_blank">{{
                            item.signing_link || '未获取到链接'
                        }}</el-link>
                        <span @click="handleCopy(item.signing_link)">复制链接</span>
                    </div>
                </div>
                <div class="refresh-status">
                    <div class="refresh-status-box">
                        <el-button
                            class="refresh-status-button"
                            :loading="loading"
                            :style="{ '--status-bgcolor': statusColor(item.status) }">
                            <img v-if="!loading" :src="statusSrc(item.status)" />{{
                                loading ? '刷新中' : statusName(item.status)
                            }}
                        </el-button>
                        <span class="refresh-status-text" @click="getData"
                            ><img
                                src="https://img.static-keyid.cn/toolspace/scrm/2023/10/1697193540557v2vs2bnlenosqmb7.png" />刷新签约状态</span
                        >
                    </div>
                </div>
            </template>
        </div>
        <div class="pay-signature-footer">
            <el-button type="primary" @click="handleGoBack">返回列表</el-button>
        </div>
    </div>
</template>

<script setup>
import { reactive, computed, onMounted, onUnmounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import request from '@/request/index';
import { setLayout, resetLayout, useDocumentVisibility } from '@/hooks/layout';

const route = useRoute();
const router = useRouter();

// 图标列表
const imgList = {
    1: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697194353007fpsqg1vs8llp8gnr.png',
    2: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697193540566b959drrphotk9xef.png',
    3: 'https://img.static-keyid.cn/toolspace/scrm/2023/10/1697193540563g7h2vcinbyir4ppa.png'
};
// 按钮状态图标
const statusSrc = status => {
    // 根据状态获取图片
    if (status == 2) {
        return imgList[2];
    }
    if (status == 3) {
        return imgList[3];
    }
    return imgList[1];
};
// 根据状态获取文案和颜色
// 按钮状态颜色
const statusColor = status => {
    if (status == 2) {
        return '#60b900';
    }
    if (status == 3) {
        return '#F53F3F';
    }
    return '#cccccc';
};
// 按钮状态名称
const statusName = status => {
    //签约状态 1.待签约 2.已签约 3.签约失败
    if (status == 2) {
        return '已签约';
    }
    if (status == 3) {
        return '签约失败';
    }
    return '未签约';
};

// 复制连接
const handleCopy = async val => {
    if (!val) {
        ElMessage.error('未获取到链接');
        return;
    }
    try {
        const { toClipboard } = useClipboard();
        await toClipboard(val);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

// 获取签约链接
const info = reactive([]); // 页面信息
let loading = ref(false);
const getData = async () => {
    loading.value = true;
    const { isp_code, merchant_no_type, open_no } = route.query;
    const { data } = await request('accountManageRefreshSigningStatus', {
        isp_code,
        merchant_no_type,
        open_no
    });
    info.length = 0;
    Object.assign(info, data);
    loading.value = false;
};
getData();

// 返回上一页
const handleGoBack = () => {
    router.go(-1);
};

const visibilitychange = () => {
    // 页面可见
    if (document.visibilityState === 'visible') {
        getData();
    }
};

onMounted(() => {
    setLayout('pay-sign-layout');
    useDocumentVisibility('add', visibilitychange);
});
onUnmounted(() => {
    resetLayout('pay-sign-layout');
    useDocumentVisibility('remove', visibilitychange);
});
</script>
<style>
.pay-sign-layout {
    height: calc(100vh - 168px);
}
</style>
<style lang="scss" scoped>
@import './scss/index.scss';
</style>
